import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import './app.scss'
import { Button } from 'antd';
import 'antd/dist/antd.css'


export default function App() {
    const [count, setCount] = useState(10);
    // 第二个参数 为空数组 生命周期中只执行一次 否则钩子函数执行便执行
    useEffect(() => {
        console.log('执行了useEffect...')
        setCount(100)
    }, []);
    
    return <div className='container'>
        <h1>欢迎SB</h1>
        <Link to='/login'>跳转登录</Link>
        <br/>
        <Link to='/home'>跳转主页</Link>
        <br />
        <p>当前count次数：{count}</p>
        <Button onClick={() => {setCount(count+1)}}>更新次数+1</Button>
    </div>
}

// export default class App extends React.Component {
//     handleJump = () => {
//         this.props.history.push('/login');
//     }
//     render() {
//         return <div className='container'>
//         <h1>欢迎SB</h1>
//         <Link to='/login'>点击跳转登录</Link>
//         <br/>
//         <Link to='/home'>点击跳转主页</Link>
//         <br />
//         <Button onClick={this.handleJump}>登录跳转</Button>
//     </div>
//     }
// }